<template>
  <div class="wrapper">
    <!--    header部分-->
    <header>
      <p>用户登录</p>
    </header>
    <!--        表单部分-->
    <ul class="form-box">
      <li>
        <div class="title">
          手机号码：
        </div>
        <div class="content">
          <input type="text" placeholder="手机号码" v-model="user.userId">
        </div>
      </li>
      <li>
        <div class="title">
          密码：
        </div>
        <div class="content">
          <input type="password" placeholder="密码" v-model="user.password">
        </div>
      </li>
    </ul>

    <div class="button-login">
      <button @click="login">登录</button>
    </div>
    <div class="button-register">
      <button @click="goToRegister">去注册</button>
    </div>
    <!--    底部菜单部分-->
    <Footer/>
  </div>

</template>

<script>
import Footer from "./item/Footer.vue";
import router from "../router/router.js";
import {reactive,getCurrentInstance} from "vue";
import axios from "axios";



export default {
  name: "Login",
  components: {Footer},

  setup(){

    let internalInstance = getCurrentInstance();

    let message=internalInstance.appContext.config.globalProperties.$message

    let user=reactive({
      userId:"",
      password:""
    })
    function goToRegister(){
      router.push({
        path:'/register'
      })
    }
    function login(){
      if(user.userId==''){
        message.warning('手机号码不能为空！');
        return;
      }
      if(user.password==''){
        message.warning('密码不能为空！');
        return;
      }
      axios({
        method:"POST",
        url:"/user/getUserByIdByPass",
        data:{
          userId:user.userId,
          password:user.password
        }
      }).then( (response)=>{
        console.log(response.data)
        let loginUser=response.data
        if(user==null||user==''){
          message.error('用户名或密码不正确！');
        }else{
          //sessionstorage有容量限制，为了防止数据溢出，所以不将userImg数据放入session中
          message.success("登录成功")
          loginUser.userImg=''
          sessionStorage.setItem('user', JSON.stringify(loginUser));
          // router.go(-1);
          router.push({path:'/home'})
        }
      }).catch(function (error){
        console.log(error)
      })
    }
    return {
      user,
      login,
      goToRegister
    }
  }
}
</script>

<style scoped>
/*总容器*/
.wrapper{
  width: 100%;
  height: 100%;
}
/*header部分*/
.wrapper header{
  width:100%;
  height: 12vw;
  background-color: #0097FF;
  color: #fff;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;

}
/*表单部分*/
.wrapper .form-box{
  width: 100%;
  margin-top: 12vw;
}

.wrapper .form-box li{
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;
  display: flex;
  align-items: center;
}
.wrapper .form-box li .title{
  flex: 0 0 18vw;
  font-size: 3vw;
  font-weight: 700;
  color: #666;

}
.wrapper .form-box li .content{
  flex: 1;
}
.wrapper .form-box li  .content input{
  border: none;
  outline: none;
  width: 100%;
  height: 4vw;
  font-size: 3vw;
}
.wrapper .button-login{
  width: 100%;
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;
}
.wrapper .button-login button{
  width: 100%;
  height: 10vw;
  font-size: 3.8vw;
  font-weight: 700;
  color: #fff;
  background-color: #38CA73;
  border-radius: 4px;

  border: none;
  outline: none;
}
.wrapper .button-register{
  width: 100%;
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;
}
.wrapper .button-register button{
  width: 100%;
  height: 10vw;
  font-size: 3.8vw;
  font-weight: 700;
  color: #666;
  background-color: #EEE;
  border-radius: 4px;

  border: none;
  outline: none;
  border: solid 1px #DDD;
}
/*底部菜单部分*/
.wrapper .footer{
  width: 100%;
  height: 14vw;
  border-top: #DDD;


  background-color: white;
  position: fixed;
  left: 0;
  bottom: 0;

  display: flex;
  justify-content: space-around;
  align-items: center;
}
.wrapper .footer li{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #999;
  user-select: none;
  cursor: pointer;
}
.wrapper .footer li p{
  font-size: 2.8vw;

}
.wrapper .footer li i{
  font-size: 5vw;
}
</style>